@()(implicit request: play.api.mvc.RequestHeader)
@main("Genome Browse") {

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			table img {
				vertical-align: middle;
			}

			table .myImgTd {
				text-align: center;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Genome Browse</h2>
		</div>
	</div>

	<div id="content" style="display: block" >

		<label>Select the columns to display:</label>
		<div id="checkbox" class="checkbox"></div>

		<div style="display: none;
			margin-bottom: 10px">Filtering and sort：
			<span id="filterCondition">

				<span class="eachFilterCondition" style="display: none">
					<span >Gene ID</span>
					<span style="color: red">LIKE</span>
					AT
					<sup style="" class="mySup" onclick="SampleManage.removeCondition">
						<i class="fa fa-times-circle"></i>
					</sup>
				</span>

			</span>
		</div>

		<div style="display: none;
			margin-bottom: 10px">Sorting conditions：
			<span id="sortCondition">

				<span class="eachFilterCondition" style="display: block">
					<span >Gene ID ,</span>
					<span style="color: red">Ascending sort</span>
					<sup style="" class="mySup" onclick="SampleManage.removeCondition">
						<i class="fa fa-times-circle"></i>
					</sup>
				</span>

			</span>
		</div>


		<table class="display table table-bordered" id="table" data-pagination="true"
		data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" style="word-wrap: break-word;">
			<thead>

			</thead>
		</table>

		<div id="allFilterContent">

		</div>

	</div>


	<script>

			$(function () {
				Browse.init
			})
	</script>


}
